<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="top-div">
            <div>
              <span class="s1">车辆总数</span>
              <span class="s2">869</span>
            </div>
            <div class="progress">
              <el-progress :percentage="50" :color="'#804AFF'"></el-progress>
            </div>
            <!-- <img src="../../assets/img-1.png" alt> -->
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
           <div>
              <span class="s1">司机总数</span>
              <span class="s2">969</span>
            </div>
            <div class="progress">
              <el-progress :percentage="20" :color="'#FFB04F'"></el-progress>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
           <div>
              <span class="s1">今日货量</span>
              <span class="s2">869</span>
            </div>
            <div class="progress">
              <el-progress :percentage="80" :color="'#2189FF'"></el-progress>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
           <div>
              <span class="s1">人员总数</span>
              <span class="s2">8009</span>
            </div>
            <div class="progress">
              <el-progress :percentage="90" :color="'#26D46C'"></el-progress>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="tableDiv">
      <div style="margin-bottom:20px">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleClick">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" class="custom-table">
        <el-table-column prop="a" label="订单号" width="auto"></el-table-column>
        <el-table-column prop="b" label="货物名称" width="auto"></el-table-column>
        <el-table-column prop="c" label="货物位置" width="auto"></el-table-column>
        <el-table-column prop="d" label="出库时间" width="auto"></el-table-column>
        <el-table-column prop="e" label="入库时间" width="auto"></el-table-column>
         <el-table-column prop="f" label="司机" width="auto"></el-table-column>
        <el-table-column prop="g" label="车牌号" width="auto"></el-table-column>
        <el-table-column prop="h" label="油量/油耗" width="auto"></el-table-column>
        <el-table-column prop="i" label="车速（km/h）" width="auto"></el-table-column>
         <el-table-column prop="j" label="刹车次数" width="auto"></el-table-column>
          <el-table-column prop="k" label="车辆状态" width="auto"></el-table-column>
           <el-table-column prop="l" label="物流状态" width="auto"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="订单" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="70px">
              <el-form-item label="订单号">
              <el-input v-model="formInline.user1" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="货物名称">
              <el-input v-model="formInline.user2" placeholder="货物名称"></el-input>
            </el-form-item>
            <el-form-item label="货物类型">
              <el-input v-model="formInline.user3" placeholder="货物类型"></el-input>
            </el-form-item>
           
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          a: "254568",
          b: "内蒙古特产羊肋骨",
          c: "1号仓库2号货架2排",
          d: "2024-4-28",
          f: "2024-4-14",
          e: "李司机",
          g: "吉A6666",
          h: "200",
          i:"400",
          j:"50/次",
          k:"良好",
          l:"运输中"
        },
         {
          a: "254568",
          b: "山东特产黑猪排骨",
          c: "1号仓库2号货架2排",
          d: "2024-4-28",
          f: "2024-4-14",
          e: "李司机",
          g: "吉A6B66",
          h: "200",
          i:"400",
          j:"50/次",
          k:"良好",
          l:"运输中"
        },
         {
          a: "254568",
          b: "辽宁北镇猪手",
          c: "1号仓库2号货架2排",
          d: "2024-4-28",
          f: "2024-4-14",
          e: "李司机",
          g: "吉A6666",
          h: "200",
          i:"400",
          j:"50/次",
          k:"良好",
          l:"运输中"
        },
         {
          a: "254568",
          b: "俄罗斯帝王蟹",
          c: "1号仓库2号货架2排",
          d: "2024-4-28",
          f: "2024-4-14",
          e: "李司机",
          g: "吉A6666",
          h: "200",
          i:"400",
          j:"50/次",
          k:"良好",
          l:"运输中"
        },
         {
          a: "254568",
          b: "陕西软籽石榴",
          c: "1号仓库2号货架2排",
          d: "2024-4-28",
          f: "2024-4-14",
          e: "李司机",
          g: "吉A6666",
          h: "200",
          i:"400",
          j:"50/次",
          k:"良好",
          l:"运输中"
        },
       
       
       
      ],
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    },
    format(row) {
      return () => {
        return row ? row : 0;
      };
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 100%;
  height: 88px;
  position: relative;
  /* text-align: center; */
  background-color: #fff;
}
.top-div img {
  width: 100%;
  height: 100%;
}
.top-div .s1 {
  position: absolute;
  top: 20px;
  left: 20px;
  color:rgba(164, 174, 189, 1);
  font-size: 12px;
}
.top-div .progress {
  width: 100%;
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.top-div .s2 {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(56, 56, 56, 1);
  font-weight: 500;
  font-size: 20px;
}
.tableDiv {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}
/deep/ .el-progress {
  width: 92%;
}
</style>


